<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>症状信息采集</title>
    <meta name="description" content="症状信息采集">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/resources/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/resources/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="/resources/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/resources/css/amazeui.min.css" />
    <link rel="stylesheet" href="/resources/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="/resources/css/app.css">
    <script src="/resources/js/jquery.min.js"></script>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/resources/jsutlis/fileutli.js"></script>

</head>

<body data-type="widgets">
<script src="/resources/js/theme.js"></script>
<div class="am-g tpl-g">
    <%--头部开始--%>
    <%@include file="header.jsp" %>
    <%--头部结束--%>

    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title  am-cf">${babyInfo.babyName}诊断信息采集</div>
                        </div>
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12" style="margin-bottom: 15px">
                            编号：${illcase.illCaseNo}
                        </div>
                        <!-- 症状详情录入 -->
                        <form class="am-form tpl-form-border-form tpl-form-border-br" name="sysmpType" id="sysmpType">

                            <!-- 按钮 -->
                            <div class="am-form-group am-u-sm-12">
                                    <span class="am-u-sm-3">
                                    </span>
                                <div class="am-u-sm-7 am-u-sm-push-3">
                                    <button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success am-u-sm-5" data-am-modal-close="">取消</button>
                                    <span class="am-u-sm-2">
                                        </span>
                                    <button type="button" id="form_submit" class="am-btn am-btn-primary tpl-btn-bg-color-success am-u-sm-5">提交</button>
                                </div>
                                <span class="am-u-sm-2">
                                    </span>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 图片显示模态框 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="sysType_enter">
    <div class="am-modal-dialog" style="width:700px;height:500px;">
        <div class="am-modal-bd">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">照片显示</div>
                            <div class="widget-function am-fr">
                                <a href="javascript: void(0)" class="am-close am-close-spin close_a" data-am-modal-close>&times;</a>
                            </div>
                        </div>
                        <div class="widget-body am-fr">
                            <form class="am-form tpl-form-border-form tpl-form-border-br" >
                                <div id="myCarousel" class="carousel slide" style="width:100%;height:100%;margin:auto;">
                                    <!-- 轮播（Carousel）项目 -->
                                    <div class="carousel-inner">
                                        <!-- <div class="item active">
                                            <img class="firstimg"  src="" style="width:280px;height:250px;margin:auto 10px;" alt="照片">
                                        </div> -->
                                    </div>
                                    <!-- 轮播（Carousel）导航 -->
                                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 模态框 -->

<%--上传提示框--%>
<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">文件正在上传。。。</div>
        <div class="am-modal-bd">
            <span class="am-icon-spinner am-icon-spin"></span>
        </div>
    </div>
</div>


<script src="/resources/js/amazeui.min.js"></script>
<script src="/resources/js/amazeui.datatables.min.js"></script>
<script src="/resources/js/dataTables.responsive.min.js"></script>
<script src="/resources/js/app.js"></script>

<script>

</script>

<script>


    var Img_arr = new Array();
    var illId = '${illcase.illCaseId}';
    var form = document.forms.namedItem("sysmpType");
    var formdata = new FormData();
    //自定义json中的键值对
    function JsonItem(sysmpinstruct,value,domtype) {
        this.sysmpinstruct = sysmpinstruct;
        this.value = value;
        this.domtype = domtype;
    }

    //在监听表单提交时的事件
    document.getElementById("form_submit").addEventListener("click",function () {
        var json_arr = new Array();//定义json变量
        //jquery遍历所有被选取得radio

        $('input:radio:checked').each(function () {
            //将checked为true的radio的名字，值，类型赋值到jsonItem中
            console.log(this);
            if (!isNotNullValue(this.value)) {
                alert(this.name+"请选择");
                return false;
            }
            var jsonItem = new JsonItem(this.name,this.value,"1");
            //将jsonItem转化为json字符串
            var json = JSON.stringify(jsonItem);
            //将json添加到json_arr中
            json_arr.push(json);
        });

        $('textarea').each(function(){
            if (!isNotNullValue(this.value)) {
                alert(this.name+"需要填写");
                return false;
            }
            if(this.value.length>0){
                var jsonItem = new JsonItem(this.name,this.value,"2");
                var json = JSON.stringify(jsonItem);
                json_arr.push(json);
            }
        });
        $('input.formdatafile').each(function(){
            var data_path = this.getAttribute("src");
            if (!isNotNullValue(data_path)) {
                alert( this.getAttribute("data-name")+"需要上传图片");
                return false;
            }
           var jsonItem = new JsonItem(this.name,data_path,"3");
           var json = JSON.stringify(jsonItem);
           json_arr.push(json);
        });
        console.log(json_arr);
        formdata.append("sysmptype",json_arr.toString());
        formdata.append("illCaseState",1);
        if (illId != null && illId != undefined && illId != '') {
            formdata.append("id", illId);
        }else {
            window.location.href ="/illCaseController/getillcase?status=0"
        }
      /*  formdata.append("id",illId);*/
        var url = "/illCaseController/InsertSysmpById";

    $.ajax({
            url: url,
            type: 'POST',
            cache: false,
            data: formdata,
            async:false,
            processData: false,
            contentType: false
        }).done(function(res){
            console.log(res.data);
              window.location.href ="/illCaseController/getillcase?status=1"
        }).fail(function(){
            console.log(res.data);
        });
    },false);


    /*$(document).ready(function(){
        $(document).on("click","#file",function(){
            var input = $("#file");
            input.on("change", function(){
                var files = this.files;
                $.each(files,function(key,value){
                    var windowURL = window.URL || window.webkitURL;
                    loadImg = windowURL.createObjectURL(value);
                    Img_arr.push(loadImg);
                    console.log(Img_arr);
                });
            });

            input.removeAttr("id");
            var newInput = '<input class="uploadImg test file" type="file" name="file" multiple id="file">';
            $(this).append($(newInput));

        });
    });*/

    function showphoto(obj) {
        $(".carousel-inner").empty();
        var pathkey = obj.getAttribute("data-path");
        var pathstr = localStorage.getItem(pathkey);
        if (isNotNullValue(pathstr)) {
            var path = pathstr.split(",");
            console.log(path);
            var first_div = '<div class="item active"><img class="firstimg"  src="" style="width:660px;height:360px;margin:auto;" alt="照片"></div>';
            $(".carousel-inner").append(first_div);
            var len = path.length;
            if (len > 3) {
                alert("最多不能超过三张图哦，请重新添加！");
                localStorage.removeItem(pathkey);
                return false;
            } else if (len == 1) {
                $(".carousel-inner").find(".firstimg").attr("src", path[0]);
            } else if (len > 1 && len <= 3) {
                $(".carousel-inner:first-child").find(".firstimg").attr("src", path[0]);
                for (var i = 0; i < len; i++) {
                    var div = '<div class="item"><img src=' + path[i] + ' style="width:660px;height:360px;margin:auto;" alt="照片"></div>';
                    $(".carousel-inner").append(div);
                }
            }
        }
    }

</script>

<script>
    /*文字录入模块*/

    function moodel_1(id,res){
        var div='<div class="am-form-group am-u-md-12 am-u-lg-6"><label class="am-u-sm-3 am-form-label">'+res.sysmpName+'</label>' +
            '<div class="am-u-sm-9"> <textarea id='+id+' name="'+res.sysmpName+'" class="am-form-field tpl-form-no-bg" style="height: 100px;max-width:385px;" placeholder="请输入详情">' +
            '</textarea></div></div>';
        return div;
    }
    <!-- 图片上传模块 -->
    function moodel_2(res){
        var div='<div class="am-form-group am-u-md-12 am-u-lg-6"><input type="hidden" class="formdatafile" data-name="'+res.sysmpName+'" data-path="pic'+res.sysmpTypeId+'" name="'+res.sysmpName+'"  /> <label class="am-u-sm-3 am-form-label">'+res.sysmpName+'</label>' +
            '<div class="am-u-sm-6 am-form-file"><div class="am-u-sm-12" style="max-width:130px;"><button type="button"  class="am-btn am-btn-danger am-btn-sm"><i class="am-icon-cloud-upload"></i> 添加照片</button>' +
            '<input class="file pic'+res.sysmpTypeId+'" id="pic'+res.sysmpTypeId+'" type="file" onchange="uploadPic(this)" accept="image/*" capture="camera" multiple/></div></div>' +
            '<div class="am-u-sm-3 am-u-md-3"><a href="#" style="font-size:15px;" onclick="showphoto(this)" data-path="pic'+res.sysmpTypeId+'" data-am-modal="{target:&apos;#sysType_enter &apos;}">查看图片</a></div></div>';
        return div;
    }
    <!-- 单选模块 -->
    function moodel_4(id,res,instruct){
        var div='<div class="am-form-group am-u-md-12 am-u-lg-6"><label class="am-u-sm-3 am-form-label">'+res.sysmpName+'</label><div class="am-u-sm-9 " id='+id+'><div class="am-form-group">';
        for (var i = 0 ; i < instruct.length ; i++){
            div = div + '<label class="am-radio-inline"> <input type="radio" name="'+res.sysmpName+'" value="'+instruct[i]+'">'+instruct[i]+'</label>';
        }
        div = div + '</div></div></div>';
        return div;
    }

</script>

<script>

    function isNotNullValue(v) {
        if (v != null && v != undefined && v != ''){
            return true;
        }
        return false;
    }

    function uploadPic(obj){
        $("#my-modal-loading").modal({target: '#my-modal-loading',width:200,height:300});
        var inputId = obj.getAttribute("id");
         var len = $(obj)[0].files.length;
       //判断上传的文件数量
        if (isNotNullValue(len)) {
            if (len > 3){
                alert("最多不能超过三张图哦，请重新添加！");
                $("#my-modal-loading").modal('close');
                return false;
            }
        }
        // 上传图片并返回结果
       var result = uploadfile(inputId);

        console.log(result);
       if (result.code == 0) {
           var path = localStorage.getItem(inputId);
           if (isNotNullValue(path)){
               localStorage.removeItem(inputId)
           }
            localStorage.setItem(inputId,result.data);
           $('input.formdatafile').each(function(){
               var data_path = this.getAttribute("data-path");
               console.log(data_path);
               if (data_path == inputId){
                   this.setAttribute("src",result.data);
               }
           });
           $("#my-modal-loading").modal('close');
            alert(result.message);
        } else {
           $("#my-modal-loading").modal('close');
            alert("图片失败，请重新上传！");
        }

    }

    function cleanLoaclStorg(){
        var t=  localStorage.length;
        var arr_name = new Array();
        for (var i = 1; i < t; i++) {
            var name = localStorage.key(i);
            arr_name.push(name);
        }
        for (var j = 0; j < arr_name.length; j++) {
            localStorage.removeItem(arr_name[j]);
        }
        console.log(t);
    }

    // 【示例】在此定义模块的id并追加到表单中

    $(function () {
        cleanLoaclStorg();
        var URL = "/process/AllSysmptomType";
        $.ajax({
            url : URL,
            type : "POST",
            cache : false,
            async : false,
            processData : false,
            contentType : false
        }).done(function(res){
            console.log(res);
            if(res!=null){
                for(var i=0 ; i<res.length; i++ ){
                    var temp = res[i];
                    switch (temp.reserve1){
                        case "1":
                            $("#sysmpType").prepend(moodel_1("text",temp));
                            break;
                        case "2":
                            var instructStr = temp.sysmpInstruct.replace(/\{|}/g,"");
                            var instruct = instructStr.split(",");
                            $("#sysmpType").prepend(moodel_4("radio",temp,instruct));
                            break;
                        case "3":
                            $("#sysmpType").prepend(moodel_2(temp));
                            break;
                    }
                }
            }

        });
    });

</script>
</body>
</html>